<template>
  <div class="header">
    <div class="header-left">
      <div class="logo">
        <img src="./assets/images/element-plus-logo.svg" alt="">
      </div>
    </div>
    <div class="header-right">
      <div class="swatch">
        <el-switch v-model="isdark" active-color="#2c2c2c" :active-icon="Sunny" inline-prompt :inactive-icon="Moon" />

      </div>
      <el-tooltip class="box-item" effect="dark" content="gitee" placement="top">
        <div class="iconfont icon-gitee iconbg"></div>
      </el-tooltip>

    </div>

  </div>
  <div class="divider"></div>

  <div class="bor">
    <el-button :plain="true" @click="open2">success</el-button>
  </div>
  
  <div class="bor">
    <el-button :plain="true" @click="open1">confirm按钮</el-button>
  </div>


  <div class="shi">
    <el-button :plain="true" @click="open3">prompt按钮</el-button>
  </div>
</template>

<script setup lang="ts">

// 这是vue的message
import {MessageBox} from "./components/MessageBox/messageBox/src/method"
// //这是tsx的message
import {Message as tsxMessage} from "./components/Message/tsxMessage/src/method"

import { Sunny, Moon } from '@element-plus/icons-vue'

import { onMounted, ref, watch } from "vue"

import { ElMessage } from 'element-plus'

let isdark = ref<boolean>(true)
let loading = ref(true)

let yao1 = () => {
  console.log("触发了事件")
}

watch(() => isdark.value, (val) => {
  getDom(val)
})

let getDom = (val: boolean) => {
  let a = document.querySelector("body")
  val ? a?.setAttribute("class", "dark") : a?.setAttribute("class", "light")
}

onMounted(() => {
  getDom(isdark.value)
  // console.log(a)
})

const open2 = () => {
  MessageBox({
    confirmBtnText:"确认",
    title:"MessageBox",
    content:"This is content"
  })
  .then(()=>{
    tsxMessage({
      duration:3000,
      message:"确认成功",
      type:"success"
    })
  }).catch(()=>{
    tsxMessage({
      duration:3000,
      message:"确认失败",
      type:"error"
    })
  })
}

const open1 = () => {
  MessageBox.confirm({
    showCancelBtn:true,
    confirmBtnText:"确认",
    cancelBtnText:"取消",
    title:"MessageBox",
    content:"This is confirm"
  })
  .then(()=>{
    tsxMessage({
      duration:3000,
      message:"确认成功",
      type:"success"
    })
  }).catch(()=>{
    tsxMessage({
      duration:3000,
      message:"确认失败",
      type:"error"
    })
  })
}

const open3 = () => {
  MessageBox.prompt({
    confirmBtnText:"确认",
    showCancelBtn:true,
    cancelBtnText:"取消",
    title:"MessageBox",
    content:"This is prompt"
  })
  .then(()=>{
    tsxMessage({
      duration:3000,
      message:"确认成功",
      type:"success"
    })
  }).catch(()=>{
    tsxMessage({
      duration:3000,
      message:"确认失败",
      type:"error"
    })
  })
}



</script>



<style  lang="scss">
.header {
  height: 55px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 32px;

  .header-left {
    .logo {
      width: 113px;
      height: 28px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .header-right {
    display: flex;
    justify-content: center;
    align-items: center;

    .swatch {}

    .iconbg {
      font-size: 20px;
      margin-left: 20px;
      cursor: pointer;
      // color: #fff;
    }
  }
}

.header1 {
  height: 100%;
  width: 100%;
  background: #213d5b;
  // margin-bottom: 10px;
}

.aside {
  height: 100%;
  width: 100%;
  background-color: pink;
}

.main {
  height: 200px;
  width: 100%;
  display: block;
  background: #18222c;
  // margin-bottom: 10px;
}

.footer {
  height: 100%;
  width: 100%;
  background: #213d5b;
  // margin-bottom: 10px;
}

.divider {
  height: 1px;
  margin-bottom: 20px;
  background-color: #dcdfe6;
}

.dark {
  background-color: #141414;
  color: #fff;
}

.light {
  background-color: #ffffff;
  color: #606266;
}

* {
  margin: 0;
  padding: 0;
}

// #app{

//   background-color: #000;
// }

.a {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  // background: #46494d;
}

.bor{
  display: flex;
  justify-content: center;
  align-items: center;
}

.shi{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>
